<template>
  <div class="teacher">
    <NavBar></NavBar>
    <div ref="main">
      <van-row type="flex" justify="center">
        <img v-lazy="teacher.user.decorate_avatar" style="margin: 10px 0px" />
      </van-row>
      <div class="teacher-info">
        <div class="name">
          <span>{{ teacher.real_name }}</span>
        </div>
        <p class="desc">{{ teacher.introduction }}</p>
        <van-row type="flex" justify="space-between" style="padding: 0px 20px">
          <van-col style="display: flex">
            <span class="rating">评分:</span>
            <van-rate
              v-model="teacher.rating_avg"
              :size="20"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
              readonly
            />
          </van-col>
        </van-row>
        <van-row type="flex" justify="space-between" class="text-info">
          <van-col>
            <span>电话:</span>
            <span>{{ teacher.user.mobile }}</span>
          </van-col>
        </van-row>
        <van-row type="flex" justify="space-between" class="text-info">
          <van-col>
            <span>学历:</span>
            <span>{{ teacher.education }}</span>
          </van-col>
        </van-row>
        <van-row type="flex" justify="space-between" class="text-info">
          <van-col>
            <span>大学:</span>
            <span>{{ teacher.university }}</span>
          </van-col>
        </van-row>
        <van-row type="flex" justify="space-between" class="text-info">
          <van-col>
            <span>专业:</span>
            <span>{{ teacher.major }}</span>
          </van-col>
        </van-row>
        <van-row type="flex" justify="space-between" class="text-info">
          <van-col>
            <span>地址:</span>
            <span v-if="teacher.province != teacher.city"
              >{{ teacher.province }}&nbsp;{{ teacher.city }}</span
            >
            <span v-else>
              {{ teacher.city }}
            </span>
          </van-col>
        </van-row>
        <van-row type="flex" justify="space-between" class="text-info">
          <van-col>
            <span>期望时薪:</span>
            <span>{{ teacher.salary }}元</span>
          </van-col>
        </van-row>
      </div>
      <div style="height: 20px"></div>
    </div>
    <Comments
      @click-comment="scrollToComment"
      :teacher="teacher"
      @reload="initTeacher"
    ></Comments>
  </div>
</template>

<script>
import Comments from "@/components/Home/Comments";
import NavBar from "@/components/Home/NavBar";
import { animate } from "popmotion";
import { mapState } from "vuex";
import { teacherAPI } from "@/api/userApi";
export default {
  data() {
    return {
      teacher: {
        user: {},
      },
      value: 5,
    };
  },
  computed: {
    ...mapState("user", ["profile"]),
  },
  methods: {
    async initTeacher() {
      const { data: res } = await teacherAPI(this.$route.params.id);
      this.teacher = res;
    },
    scrollToComment() {
      // 1. 当前滚动条的位置
      const now = window.scrollY;
      // 是否滚动到评论，切换状态
      const dist = this.$refs.main.offsetHeight;
      // 3. 实现滚动动画
      animate({
        from: now, // 当前的位置
        to: dist, // 目标位置
        onUpdate: (latest) => window.scrollTo(0, latest),
      });
    },
  },
  created() {
    this.initTeacher();
  },
  components: {
    Comments,
    NavBar,
  },
};
</script>

<style lang="less" scoped>
.teacher {
  background-color: #fbfbfb;
}
.name {
  font-size: 26px;
  text-align: center;
}
.desc {
  margin: 0;
  font-size: 14px;
  padding: 20px 20px;
  text-indent: 32px;
  line-height: 20px;
}
.rating {
  font-size: 16px;
  display: flex;
  padding-bottom: 5px;
  color: #ffd21e;
}
.text-info {
  //   color: #99cc99;
  padding: 0px 20px;
  padding-bottom: 5px;
  font-size: 16px;
}
</style>
